<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title style="height: 500px">我的动态</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/myStrategyComment.css">
    <link rel="stylesheet" href="../css/app.css">
    <script src="../js/jquery/jquery.min.js"></script>

    <link rel="stylesheet" href="../js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../js/jqueryAlert/common.css">
    <script src="../js/jqueryAlert/alertPopShow.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/css/heart.css">


    <script>
        $(function () {
            var cid;
            var commentId;//文章ID

            /*获取主账号数据*/
            var user = JSON.parse(sessionStorage.getItem("user"));
            var userId = user.id;
            var userName = user.nickName;
            $(".info").renderValues(user, {
                'getLogin': function (item, value) {
                    var url = $(item).data('url');
                    $(item).attr("href", url + value);

                }

            });

            /*获取传来的id*/
            var params = getParams();
            var userId = params.userId;


            var currentPage = 1;
            //总页数  用来判断是否是最后一页
            var pages;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var travelData = [];
            //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var loading = false;//查询状态
            //获取我的游记数据
            function query() {
                //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                if (loading) {
                    return;
                }
                //每次在发送ajax前,将查询状态改为正在查询,
                loading = true;
                $.get("/dynamics/user", {currentPage: currentPage,  userId: userId}, function (data) {
                    //将查询出来的需要的数据的数组放到容器中
                    $.merge(travelData, data.list);
                    //render-loop="list"时 会找叫list的属性,所以需要将数据数组转为json对象的list属性
                    var json = {list: travelData};
                    var listUser = {listUser: travelData[0]};
                    /*console.log(listUser);*/
                    $(".info").renderValues(listUser);

                    //渲染数据
                    $("#list").renderValues(json, {
                        //参数item  render-key 和render-fun所在的标签
                        //value 就是render-key获取的值
                        'getHref': function (item, value) {
                            var url = $(item).data('url');
                            /*console.log(url);*/
                            $(item).attr("href", url + value);
                        },
                        getCommentId: function (item, value) {
                            var item = $(item)
                            item.attr('data-id', value);
                        },
                        'getWenZhangId': function (item, value) {
                            var item = $(item)
                            item.attr('data-id', value);
                        },
                        'getOneId': function (item, value) {
                            var item = $(item)
                            item.attr('data-id', value);
                        },
                        'getReplyerId': function (item, value) {
                            var item = $(item)
                            item.attr('data-id', value);
                        },
                        'getByreplyerrId': function (item, value) {
                            var item = $(item)
                            item.attr('data-id', value);
                            /*$(item).attr("href", url + value);*/

                        },
                        'getId': function (item, value) {
                            $(item).attr("data-id", value);
                        },
                        'getNames': function (item, value) {
                            var nameString = "";
                            if (value) {
                                $.each(value, function (index, ele) {
                                    nameString += "<a class='" + ele.id + "' href='/userProfiles.html?id=" + ele.id + "'>" + ele.nickName + "</a> "
                                });
                                $(item).html(nameString);
                            }
                        },
                        'getState': function (item, value) {
                            if (value == 0) {
                                $(item).removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                            } else if (value == 1) {
                                $(item).removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                            }
                        }
                    });

                    //给动态图片绑定事件
                    $(".list-img").click(function () {
                        var url = $(this).attr("src");
                        $(document).dialog({
                            titleShow: false,
                            overlayClose: true,
                            content: '<img src="' + url + '" width="100%"/>'
                        });
                    });

                    //当前页加1 下次将查询第二页数据
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //查询请求结果,则将查询状态改为 不在查询中
                    loading = false;

                    //点击回复
                    $(".commentButton").click(function () {
                        cid = $(this).data("id");
                        $("#CommentModal input").val("");
                        $("#CommentModal").modal("show");
                    });
                    //点击一级人的时候
                    $(".commentBtn").click(function () {
                        //获取当前comment的id
                        commentId = $(this).closest(".onePerson").data("id");
                        console.log(commentId);
                        cid = $(this).data("id")
                        $("#ReplyModal input").val("");
                        $("#ReplyModal").modal("show");
                    });
                    //点击二级评论的回复者
                    $(".replyerBtn").click(function () {
                        //获取当前comment的id
                        commentId = $(this).closest(".onePerson").data("id");
                        console.log(commentId);
                        cid = $(this).data("id")
                        $("#ReplyModal input").val("");
                        $("#ReplyModal").modal("show");
                    })
                    //点击二级评论的被回复者
                    $(".byreplyerrBtn").click(function () {
                        //获取当前comment的id
                        commentId = $(this).closest(".onePerson").data("id");
                        console.log(commentId);
                        cid = $(this).data("id")
                        $("#ReplyModal input").val("");
                        $("#ReplyModal").modal("show");
                    });

                    //点击删除时
                    $(".deleteBtn").click(function () {
                        //获取当前comment的id
                        commentId = $(this).closest(".contentDynamic").find(".commentButton").data("id");
                        console.log(commentId);
                        $.ajax({
                            type:"DELETE",
                            url:"/dynamics/delete/"+commentId,
                            success:function (data) {
                                location.reload();
                            }
                        })
                    });

                    //=========================点赞===========================

                    //点赞的拇指按钮绑定点击事件(点赞/取消点赞)
                    $(".likeBtn").click(function () {
                        var thumbs = $(this).find("i.thumbs");
                        var namelist = $(this).siblings("div.nameList");
                        console.log("点击了点赞按钮");
                        var contentId = $(this).data("id");
                        var type = $(".likeBtn").data("type");
                        console.log(contentId);
                        $.get("/dogood", {userId: userId, contentId: contentId, type: type}, function (data) {
                            if (data.success) {
                                console.log("设置点赞");
                                //设置点赞,回显实心拇指
                                thumbs.removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");

                                var name = "<a class='" + userId + "' href='/userProfiles.html?id=" + userId + "'>" + userName + "</a> ";
                                namelist.append(name);
                            } else {
                                console.log("取消点赞");
                                //取消点赞,回显空心拇指
                                thumbs.removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                                var a = namelist.find("a");
                                a.remove("." + userId);
                            }
                        })
                    })

                });
            }

            //默认的第一次查第一页数据
            query();
            //给window绑定滚动事件,当window滚动式,调用其中的函数
            $(window).scroll(function () {
                //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                    if (currentPage <= pages) {
                        query();
                        //滚动到底部时,如果此时还有页数 弹出加载中信息
                        $(document).dialog({
                            type: 'notice',
                            infoText: '加载中',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    } else {
                        //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            /*绑定动态发表*/
            $("#publish").click(function () {
                console.log(124);
                window.location.href = "/mine/addDynamic.html";
            })

            //评论完成的点击
            $(".commentSubmitBtn").click(function () {
                var content = $("#commentForm input[name='content']").val();
                console.log(cid);
                $.post('/comments/strategy', {
                    'commenter.id': user.id,
                    answer_id: cid,
                    type: 5,
                    content: content
                }, function (data) {
                    console.log(data);
                    if (data.success) {
                        location.reload();
                    }
                });
            });

            //回复完成的点击
            $(".replySubmitBtn").click(function () {
                var content = $("#replyForm input[name='content']").val();
                console.log(cid);
                $.post('/comments/strategy/reply', {
                    'replyer.id': user.id,
                    'byreplyerr.id': cid,
                    comment_id: commentId,
                    type: 5,
                    content: content
                }, function (data) {
                    console.log(data);
                    if (data.success) {
                        location.reload();
                    }
                });
            });

        });
    </script>

    <style>
        /*.div1{width: 200px;height: 200px; opacity: 0.6;background: red;}*/
        .div1 {
            background-color: rgba(0, 150, 150, 2)
        }

        /*<!--最后一个参数设置透明度，前面三个是RGB颜色值-->*/
    </style>
    <link rel="stylesheet" href="../css/heart.css">

</head>


<body>

<div class="search-head div1">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col-xs-12">
            <span>我的动态</span>

        </div>
        <div class="col"></div>
        <div class="col-xs-2">
            <img id="publish" width="25" height="20" src="../img/add.png" style="margin-right: 10px">
        </div>
    </div>

</div>
<!--用户信息-->
<header class="info">
    <!--render-key="id" render-fun="getLogin"-->
    <a data-url="userProfiles.html?id=">
        <img id="bg" render-src="listUser.user.coverImgUrl">
        <p id="user-name" class="data-name" render-html="listUser.user.nickName"></p>
        <img id="avt" class="data-avt" render-src="listUser.user.headImgUrl">
    </a>
</header>


<div id="main">
    <div id="list">
        <ul>
            <div render-loop="list" id="listUser">
                <li>
                    <div class="po-avt-wrap">
                        <p id="user-date" class="data-date" render-html="list.createTime"></p>
                    </div>
                    <div class="po-cmt">
                        <div class="po-hd contentDynamic">
                            <!--<p class="po-name"><span class="data-name" render-html="list.user.nickName"></span></p>-->
                            <div class="post">
                                <p render-html="list.content"></p>

                                <ul class="comment-img" render-loop="list.imgArr">
                                    <li>
                                        <img class="list-img" render-src="list.imgArr.self"
                                             style="height: 140px;width: 100%">
                                    </li>
                                </ul>
                                <button style="color: grey" class="deleteBtn">删除</button>
                            </div>
                            <!--<p class="time" render-html="list.createTime"></p>-->
                                <!--评论按钮-->
                                <img class="c-icon commentButton"
                                     render-key="list.id" render-fun="getWenZhangId" src="/img/c.png"/>
                        </div>
                        <div class="r"></div>
                        <!--点赞按钮-->
                        <div class="cmt-wrap">
                            <div class="nameList" render-key="list.users" render-fun="getNames"></div>
                            <div class="likeBtn" data-id="" render-key="list.id" render-fun="getId" data-type="4">
                                <i class="fa fa-thumbs-o-up thumbs" style="margin-left: 220px"
                                   render-key="list.state" render-fun="getState"></i>
                            </div>
                        </div>

                        <!--评论-->
                        <div class="containerComment" render-loop="list.comment">
                            <div class="onePerson" render-key="list.comment.id" render-fun="getOneId">
                                <a style="color: #0a90e2;" render-key="list.comment.commenter.id"
                                   render-fun="getCommentId" class="commentBtn"
                                   render-html="list.comment.commenter.nickName">
                                </a>:
                                <span style="color: dimgrey" render-html="list.comment.content"></span>

                                <div class="containerReply" render-loop="list.comment.commentOfAlls">
                                    <div>
                                        <a style="color: #0a90e2" render-key="list.comment.commentOfAlls.replyer.id"
                                           render-fun="getReplyerId" class="replyerBtn"
                                           render-html="list.comment.commentOfAlls.replyer.nickName"></a>
                                        回复
                                        <a style="color: #0a90e2" render-key="list.comment.commentOfAlls.byreplyerr.id"
                                           render-fun="getByreplyerrId" class="byreplyerrBtn"
                                           render-html="list.comment.commentOfAlls.byreplyerr.nickName"></a>
                                        <span style="color: dimgrey"
                                              render-html="list.comment.commentOfAlls.content"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </div>
        </ul>
    </div>
</div>


<!--回复模态框-->
<div class="modal fade" id="ReplyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">回复</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comments/strategy/reply" method="post" id="replyForm">
                    <input type="hidden" id="replyUserId" name="replyer.id"/><!--评论人Id-->
                    <input type="hidden" id="targetUserId" name="byreplyerr.id"/><!--被评论人Id-->
                    <input type="hidden" id="commentId" name="comment_id"/><!--这条评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary replySubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<!--评论模态框-->
<div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="commentForm">
                    <input type="hidden" name="commenter.id"/><!--评论人Id-->
                    <input type="hidden" name="answer_id"/><!--评论的文章id-->
                    <input type="hidden" name="type"/><!--评论的类型-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary commentSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>